<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title></title>
		<style>
			body {
				height: 100vh;
				margin: 0;
				overflow: hidden;
				position: relative;
				font-family: Arial, sans-serif;
			}

			.aa {
				width: 200px;
				height: 150px;
				background-color: #ff6b6b;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10px;
				cursor: pointer;
				position: absolute;
				left: 60%;
				top: 55%;
				transform: translate(-50%, -50%);
				transition: all 0.5s ease;
				text-align: center;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
				font-size: 30px;
			}

			.bb {
				width: 200px;
				height: 150px;
				background-color: #ff6b6b;
				color: white;
				display: flex;
				justify-content: center;
				align-items: center;
				border-radius: 10px;
				cursor: pointer;
				position: absolute;
				left: 37%;
				top: 55%;
				transform: translate(-50%, -50%);
				transition: all 0.5s ease;
				text-align: center;
				box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
				font-size: 30px;
			}

			.cc {
				position: fixed;
				top: 0;
				left: 0;
				width: 100vw;
				height: 100vh;
				z-index: -1;
				/* 置于底层 */
				border: none;
				/* 去除边框 */
				pointer-events: none;
				/* 允许点击穿透 */
			}
		</style>
	</head>
	<body>
		<div>
			<iframe class="cc" src="beijing.html"></iframe>
			<div class="aa" onmouseover="moveElement(this)" onclick="this.textContent = '抓到我了!'">
				不能
			</div>
			<div class="bb" onclick="this.textContent = '抓到我了!'">
				能
			</div>
			<script>
				function moveElement(el) {
					// 获取窗口尺寸
					const windowWidth = window.innerWidth;
					const windowHeight = window.innerHeight;

					// 获取元素尺寸
					const elWidth = el.offsetWidth;
					const elHeight = el.offsetHeight;

					// 计算随机位置（确保元素完全可见）
					const maxX = windowWidth - elWidth;
					const maxY = windowHeight - elHeight;

					const randomX = Math.floor(Math.random() * maxX);
					const randomY = Math.floor(Math.random() * maxY);

					// 应用新位置
					el.style.left = `${randomX}px`;
					el.style.top = `${randomY}px`;
					el.style.transform = 'translate(0, 0)';

				}
			</script>
		</div>
	</body>
</html>